<template>
  <div class="selete">
    <div class="selete-tab">
      <span @click="clickBtn1" :class=" isclick1? 'defaultSelete':'' ">周边短途</span>
      <span @click="clickBtn2" :class=" isclick2? 'defaultSelete':'' ">当地乐玩</span>
    </div>

    <div class="selete-content">
      <div v-show="isclick1">
        <ul>
          <li
            v-for="(item,index) in listTitle"
            :key="index"
            :class="index===currentLiIndex? 'active-li':'' "
            @click="qiehuan(index)"
          >{{item.title}}</li>
        </ul>

        <div>
          <swiper ref="mySwiper" :options="swiperOptions" class="swiper-item">
            <swiper-slide v-for="(item,index) in listdata" :key="index">
              <div class="lv-bgimg" :style=" 'backgroundImage:url(' + item.url + ')' ">
                <div class="startAdress">
                  <p>
                    {{item.startAdress}}
                    <span>|</span>
                  </p>
                  <span>{{item.day}}</span>
                </div>
                <p class="price">￥{{item.price}}起</p>
              </div>
              <p class="title">{{item.title}}</p>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>

      <div v-show="isclick2">2</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      isclick1: true,
      isclick2: false,
      listTitle: [
        { title: "本周活动" },
        { title: "下周活动" },
        { title: "五一出游" },
        { title: "宝藏小城" }
      ],
      currentLiIndex: 0,
      listdata: [
        {
          title: "青山湖骑行",
          url: require("../../assets/images/1.jpg"),
          price: 55,
          startAdress: "杭州出发",
          day: "1天"
        },
        {
          title: "吴越古道樱花开",
          url: require("../../assets/images/2.jpg"),
          price: 140,
          startAdress: "杭州出发",
          day: "1天"
        },
        {
          title: "富阳云台杜鹃",
          url: require("../../assets/images/3.jpg"),
          price: 110,
          startAdress: "杭州出发",
          day: "1天"
        },
        {
          title: "风云.南尖岩",
          url: require("../../assets/images/4.jpg"),
          price: 395,
          startAdress: "杭州出发",
          day: "2天"
        },
        {
          title: "千岛湖环岛骑行",
          url: require("../../assets/images/5.jpg"),
          price: 580,
          startAdress: "杭州/淳安...",
          day: "2天"
        },
        {
          title: "征途灵山天梯峰",
          url: require("../../assets/images/6.jpg"),
          price: 395,
          startAdress: "上饶出发",
          day: "2天"
        },
        { title: "越野车", url: require("../../assets/images/1.jpg") },
        { title: "同城", url: require("../../assets/images/1.jpg") },
        { title: "房车", url: require("../../assets/images/1.jpg") },
        { title: "骑行", url: require("../../assets/images/1.jpg") },
        { title: "赛事", url: require("../../assets/images/1.jpg") },
        { title: "游轮", url: require("../../assets/images/1.jpg") }
      ],
      swiperOptions: {
        // el: '.swiper-pagination',
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        // autoplay: {
        //   delay: 3000,
        //   stopOnLastSlide: false,
        //   disableOnInteraction: true
        // },
        slidesPerGroup: 3,
        slidesPerView: 3,
        slidesPerColumn: 2,
        slidesPerColumnFill: "row"
      }
    };
  },
  methods: {
    clickBtn1() {
      (this.isclick1 = true), (this.isclick2 = false);
    },
    clickBtn2() {
      (this.isclick1 = false), (this.isclick2 = true);
    },
    qiehuan(i) {
      this.currentLiIndex = i;
    }
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.selete {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  .selete-tab {
    width: 100%;
    display: flex;
    span {
      flex: 1;
      height: 40/37.5rem;
      line-height: 40/37.5rem;
      text-align: center;
      font-size: 0.32rem;
      font-weight: 700;
      &:first-child {
        border-radius: 0 0 10/37.5rem 0;
      }
      &:last-child {
        border-radius: 0 0 0 10/37.5rem;
      }
    }
  }
  .selete-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20/37.5rem;
    ul {
      display: flex;
      list-style: none;
      justify-content: space-between;
      margin: 0;
      padding: 10/37.5rem 0;
      li {
        padding: 5/37.5rem 10/37.5rem;
        border-radius: 15/37.5rem;
        text-align: center;
        font-size: 15/37.5rem;
        border: 1/37.5rem solid #f0f0f0;
      }
    }
  }
}
.active-li {
  font-weight: 700;
  color: orange;
}
.swiper-slide {
  padding-right: 2/37.5rem;
  box-sizing: border-box;
}
.lv-bgimg {
  width: 100%;
  height: 100/37.5rem;
  font-size: 10/37.5rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  .startAdress {
    font-size: 11/37.5rem;
    padding: 0 10/37.5rem;
    border: 1/37.5rem solid #e6e6e6;
    background-color: #56514a;
    border-radius: 5/37.5rem;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    &>span{
      text-align: center;
    }
    // p{
    //   width: 65/37.5rem;
    //   overflow: hidden;
    //   white-space:  nowrap;
    //   text-overflow: ellipsis;
    // }
  }
  .price {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    font-weight: 700;
    font-size: 13/37.5rem;
  }
}
.title {
  text-align: center;
  font-size: 15/37.5rem;
  padding: 10px 0;
}
.defaultSelete {
  background-color: #eeeeee;
  position: relative;
  &:after {
    content: "";
    width: 40/37.5rem;
    height: 5/37.5rem;
    background-color: #ffdd40;
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    z-index: 99;
  }
}
.swiper-pagination /deep/.swiper-pagination-bullet {
  width: 5/37.5rem;
  height: 5/37.5rem;
  background-color: #dddddd;
  opacity: 1;
}
.swiper-pagination /deep/ .swiper-pagination-bullet-active {
  width: 11/37.5rem;
  height: 5/37.5rem;
  border-radius: 5/37.5rem;
  background-color: #ffdd40;
}
.swiper-container-horizontal > .swiper-pagination-bullets{
bottom: 0;
}
</style>